import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Row, Col, Form, Button, Table, Card} from 'antd';
import {PAGE, TABLE, PAGINATION_OPTIONS, FORM_OPTIONS,
    COMMON_TABLE_QUERY_FAIL_TEXT, COMMON_TABLE_EMPTY_TEXT, DATETIME_FORMAT} from '../../constants';
import TextInput from 'Shared/components/TextInput';
import {conventSorter} from '../utils';
import {formatDateTime} from '../../utils';
import styles from '../style.css';
import {getAutoDetail} from '../api';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const FormItem = Form.Item;
const {Description} = DescriptionList;

class AutoApproveHisDetailTablePanel extends PureComponent {
    state = {
        claimCode: '',
        pageIndex: PAGE.index,
        pageSize: PAGE.smallSize,
        isFetching: false,
        data: {},
        message: '',
        currentCondition: {}
    }
    componentDidMount() {
        this.onQuery({
            pageIndex: PAGE.index,
            pageSize: PAGE.size,
        });
    }
    handleTableChange = (pagination, filters, sorter) => {
        const oldCondition = {...this.state.currentCondition};
        if(pagination.current - 1 === oldCondition.pageIndex && pagination.pageSize === oldCondition.pageSize) {
            const sortOptions = conventSorter(sorter);
            const condition = Object.assign({}, oldCondition, sortOptions, {
                pageIndex: PAGE.index
            });
            this.onQuery(condition);
            this.setState({
                sortField: sortOptions.sortField,
                isDesc: sortOptions.isDesc
            });
        }
    }
    handleFilterPressEnter = (value, name) => {
        this.setState({[name]: value}, this.onClickSearchBtn);
    }
    onQuery = condition => {
        this.setState({isFetching: true});
        getAutoDetail(this.props.id, condition)
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        message: '',
                        data: res.data.content[0],
                        currentCondition: Object.assign({}, condition, {
                            totalElements: res.data.totalElements,
                            pageSize: res.data.pageSize,
                            pageIndex: res.data.pageIndex,
                        })
                    });
                else
                    this.setState({
                        isFetching: false,
                        data: [],
                        message: res.message
                    });
            });
    }

    onClickSearchBtn = () => {
        const condition = {
            claimCode: this.state.claimCode,
            pageIndex: PAGE.index,
            pageSize: this.state.pageSize,
            sortField: this.state.sortField,
            isDesc: this.state.isDesc
        };
        this.onQuery(condition);
    }

    onPageIndexChange = current => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = current - 1;
        this.onQuery(condition);
    }

    onPageSizeChange = (current, pageSize) => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = PAGE.index;
        condition.pageSize = pageSize;
        this.onQuery(condition);
        this.setState({
            pageSize
        });
    }

    onChange = (value, name) => {
        this.setState({[name]: value});
    }
    onClickReset = () => {
        this.setState({
            claimCode: ''
        });
    }
    render() {
        const {formatMessage} = this.props.intl;
        const {isFetching, data, message} = this.state;
        const {pageIndex, pageSize, totalElements} = this.state.currentCondition;
        const columns = [
            {
                title: formatMessage({
                    id: 'autoApproveHisDetailTablePanel.column.claimCode',
                    defaultMessage: '索赔单号'
                }),
                dataIndex: 'claimCode'
            }, {
                title: formatMessage({
                    id: 'autoApproveHisDetailTablePanel.column.result',
                    defaultMessage: '审核结果'
                }),
                dataIndex: 'result'
            }, {
                title: formatMessage({
                    id: 'autoApproveHisDetailTablePanel.column.comment',
                    defaultMessage: '审核意见'
                }),
                dataIndex: 'comment'
            }
        ];
        const pagination = {
            total: totalElements,
            current: pageIndex + 1,
            pageSize,
            onShowSizeChange: this.onPageSizeChange,
            onChange: this.onPageIndexChange,
            ...PAGINATION_OPTIONS
        };
        return (
            <div>
                <Card>
                    <Row className="form-standard">
                        <Col {...FORM_OPTIONS.col}>
                            <FormItem label={formatMessage({
                                id: 'autoApproveHisDetailTablePanel.claimCode',
                                defaultMessage: '索赔单号'
                            })} {...FORM_OPTIONS.item}>
                                <TextInput
                                    allowClear
                                    name="claimCode"
                                    value={this.state.claimCode}
                                    onPressEnter={this.handleFilterPressEnter}
                                    onChange={this.onChange}/>
                            </FormItem>
                        </Col>
                        <Col {...FORM_OPTIONS.col} className={styles['inline-button']}>
                            <Button
                                type="primary"
                                loading={isFetching}
                                onClick={this.onClickSearchBtn}>
                                {formatMessage({
                                    id: 'autoApproveHisDetailTablePanel.btn.query',
                                    defaultMessage: '查询'
                                })}
                            </Button>
                        </Col>
                    </Row>
                </Card >
                <Card>
                    <DescriptionList>
                        <Description term={formatMessage({
                            id: 'autoApproveHisDetailTablePanel.operation.approveTime',
                            defaultMessage: '审核时间'
                        })}>{formatDateTime(data.approveTime, DATETIME_FORMAT)}
                        </Description>
                        <Description term={formatMessage({
                            id: 'autoApproveHisDetailTablePanel.operation.totalQTY',
                            defaultMessage: '总计数量'
                        })}>{data.totalQTY}
                        </Description>
                        <Description term={formatMessage({
                            id: 'autoApproveHisDetailTablePanel.operation.passQTY',
                            defaultMessage: '通过数量'
                        })}>{data.passQTY}
                        </Description>
                        <Description term={formatMessage({
                            id: 'autoApproveHisDetailTablePanel.operation.rejectedQTY',
                            defaultMessage: '拒赔数量'
                        })}>{data.rejectedQTY}
                        </Description>
                        <Description term={formatMessage({
                            id: 'autoApproveHisDetailTablePanel.operation.turnDownQTY',
                            defaultMessage: '驳回数量'
                        })}>{data.turnDownQTY}
                        </Description>
                        <Description term={formatMessage({
                            id: 'autoApproveHisDetailTablePanel.operation.notPassQTY',
                            defaultMessage: '不通过数量'
                        })}>{data.notPassQTY}
                        </Description>
                    </DescriptionList>
                </Card>
                <Card>
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        dataSource={data.details}
                        columns={columns}
                        loading={isFetching}
                        pagination={pagination}
                        onChange={this.handleTableChange}
                        {...TABLE}
                        locale={{
                            emptyText: message ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
                        }} />
                </Card >
            </div>
        );
    }
}

AutoApproveHisDetailTablePanel.propTypes = {
    intl: PropTypes.object
};
import {injectIntl} from '../intl';
export default injectIntl(AutoApproveHisDetailTablePanel);
